<script setup>
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { onMounted, ref } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import { useStateStore } from "@/stores/counter.js";
import {dynamAPI, dynamicAPI, extractAPI} from "@/apis/anay.js";

const loading = ref(true);

const stateStore = useStateStore();

const route = useRoute();

let tableData = ref([]);
// 总数
const total = ref(0);
// 当前页
let current = ref(1);
// 每页总数
const limit = ref(15);
const manifest_path = ref(null);
const dex_output_dir = ref(null);
const file_path = ref('');


const loadData = async (filepath) => {
  const storedDex = sessionStorage.getItem('dex_dir');
  if (storedDex) {
    dex_output_dir.value = JSON.parse(storedDex);
    console.log('Loaded from sessionStorage:', dex_output_dir.value);
  } else {
    await fetchData(filepath);  // 确保等待 fetchData 完成
  }
}

const fetchData = async (filepath) => {
  try {
    const response = await extractAPI(filepath);
    manifest_path.value = response.data.manifest_path;
    dex_output_dir.value = response.data.dex_output_dir;
    sessionStorage.setItem('manifestPath', JSON.stringify(manifest_path.value));
    sessionStorage.setItem('dex_dir', JSON.stringify(dex_output_dir.value));
    console.log('Data fetched and stored:', dex_output_dir.value);
  } catch (error) {
    console.error('Failed to fetch data', error);
  }
}

const pageChange = async (page) => {
  console.log('Using dex_output_dir:', dex_output_dir.value);
  const response = await dynamAPI(dex_output_dir.value, file_path.value, page);
  console.log('DynamAPI response:', response);
  tableData.value = response.data.apiData;
  total.value = response.data.total;
  current.value = page;
  stateStore.changeAPI();
  loading.value = false;
};

onMounted(async () => {
  file_path.value = route.query.filepath;
  await loadData(file_path.value);  // 确保 loadData 完成后执行
  await pageChange(1);
});

</script>
<template >
  <el-card
    shadow="always"
    style="margin-bottom: 10px"
    v-loading="loading"
    element-loading-text="分析中..."
  >
    <template #header
      ><SvgIcon iconName="icon-fenxi" style="margin-right: 5px"></SvgIcon
      >API</template
    >
    <div class="siteHead">
      <SvgIcon class="siteIcon" iconName="icon-jiekoufenxi" style="margin-right: 5px"></SvgIcon>
      <span>接口数据:</span>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="method" label="API接口名" width="380" />
      <el-table-column prop="source" label="来源" />
      <el-table-column prop="line" label="代码" />
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        v-model:current-page="current"
        :page-size="limit"
        background
        layout="total,jumper,prev, pager, next"
        :total="total"
        :pager-count="6"
        @current-change="pageChange"
      />
    </el-config-provider>
  </el-card>
</template>

<style scoped>
::v-deep .el-table__body{
  height: 100%;
  overflow: auto;
}
::v-deep .el-scrollbar__view{
  height: 100%;
}
.el-card.is-always-shadow{
  height: 100%;
  overflow: auto;
}
.siteHead{
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.siteHead span{
  font-size: 18px;
  font-weight: bold;
  margin-right: 3px;
}
.siteIcon{
  width: 50px;
  height: 50px;
}
.el-table {
  --el-table-text-color: #3f444d;
  --el-table-header-text-color: #13161a;
  height: 82%;
}
.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
::v-deep .el-card__header {
  font-weight: bold;
  font-size: 20px;
}
</style>